要实现在页面上点击指定元素时，弹出一个信息提示框。在前面的文章中，我们已经简单介绍了如何使用纯 CSS 创建一个三角形。本文在此基础上，记录如何使用 CSS 创建带三角形的提示框。

    实现的原理是创建一个div提示框，然后再创建一个三角形，将三角形用绝对定位（absolute）到提示框对应的位置。

    一、创建不带边框的提示框：

    之前已介绍过怎么生成三角形，直接代码如下：

    以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:

    二、创建带边框的提示框：

    第一步实现了不带边框的提示框，如果要实现带边框的提示框，原理是先把提示框容器加上边框，然后通过伪元素，在需要带箭头的边框上面生成2个三角形，最后改变最上面的三角形的颜色（和提示框的内容背景色相同），即可实现。代码如下：

    以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:

   通过以上两个例子，展示了如何生成简单的提示框。而对于有边框的提示框，如果边框颜色和内容区背景色相同，也会实现无边框的提示框效果。在使用时，可以根据自己需要，调整代码。